@import url(chrome://global/skin/);


#box-main {
  background: #111;
}
#box-info {
  color: white;
  font-weight: bold;
}
#next-block-display {
  margin: 10px;
}

#blocks-sqr, #blocks-hex, #blocks-tri { list-style-image: url(icons.png); }
#blocks-sqr { -moz-image-region: rect(0 18px 16px 0); }
#blocks-tri { -moz-image-region: rect(0 36px 16px 18px); }
#blocks-hex { -moz-image-region: rect(0 54px 16px 36px); }

#box-main {
  -moz-box-orient: horizontal;
  background-color: #A0A0A0;
}
#box-info {
  -moz-box-orient: vertical;
   background-color: #A0A0A0;
}

#next-sqr-block-display {
	background-color: #A0A0A0;
}


#box-main[nextblockhidden] {
  -moz-box-orient: vertical;
}

#box-main[nextblockhidden] #box-info {
  -moz-box-orient: horizontal;
  background-color: #A0A0A0;
}

.message {
  background: #111;
  color: white;
  border: 1px solid #111;
  -moz-border-radius: 5px;
  padding: 3px;
  font-size: 1.5em;
  margin: 100px 20px 0;
  text-align: center;
}



/* Square tiles */
.square-grid { list-style-image: url(squares.png); }
.gridlines .square-0 {
  list-style-image: none;
  width: 20px; height: 20px;
  background: black;
  border-left: 1px solid #111;
  border-bottom: 1px solid #111;
}
.square-0 { -moz-image-region: rect(0px 20px 20px 0px); }
.square-1 { -moz-image-region: rect(0px 40px 20px 20px); }
.square-2 { -moz-image-region: rect(0px 60px 20px 40px); }
.square-3 { -moz-image-region: rect(0px 80px 20px 60px); }
.square-4 { -moz-image-region: rect(0px 100px 20px 80px); }
.square-5 { -moz-image-region: rect(0px 120px 20px 100px); }
.square-6 { -moz-image-region: rect(0px 140px 20px 120px); }
.square-7 { -moz-image-region: rect(0px 160px 20px 140px); }
.square-8 { -moz-image-region: rect(20px 20px 40px 0px); }
.square-9 { -moz-image-region: rect(20px 40px 40px 20px); }
.square-10 { -moz-image-region: rect(20px 60px 40px 40px); }
.square-11 { -moz-image-region: rect(20px 80px 40px 60px); }
.square-12 { -moz-image-region: rect(20px 100px 40px 80px); }
.square-13 { -moz-image-region: rect(20px 120px 40px 100px); }
.square-14 { -moz-image-region: rect(20px 140px 40px 120px); }
.square-15 { -moz-image-region: rect(20px 160px 40px 140px); }
.square-16 { -moz-image-region: rect(40px 20px 60px 0px); }
.square-17 { -moz-image-region: rect(40px 40px 60px 20px); }
.square-18 { -moz-image-region: rect(40px 60px 60px 40px); }
.square-19 { -moz-image-region: rect(40px 80px 60px 60px); }
.square-20 { -moz-image-region: rect(40px 100px 60px 80px); }
.square-21 { -moz-image-region: rect(40px 120px 60px 100px); }
.square-22 { -moz-image-region: rect(40px 140px 60px 120px); }
.square-23 { -moz-image-region: rect(40px 160px 60px 140px); }
.square-24 { -moz-image-region: rect(60px 20px 80px 0px); }
.square-25 { -moz-image-region: rect(60px 40px 80px 20px); }
.square-26 { -moz-image-region: rect(60px 60px 80px 40px); }
.square-27 { -moz-image-region: rect(60px 80px 80px 60px); }
.square-28 { -moz-image-region: rect(60px 100px 80px 80px); }
.square-29 { -moz-image-region: rect(60px 120px 80px 100px); }
.square-30 { -moz-image-region: rect(60px 140px 80px 120px); }
.square-31 { -moz-image-region: rect(60px 160px 80px 140px); }



/* Hexagonal tiles */

.hex-grid {
  list-style-image: url(hexagons.png);
  /* counteract negative margin */
  padding-left: 5px;
}
.hex-grid > vbox { margin-left: -5px; }

.gridlines .hex-top-0 { -moz-image-region: rect(0px 24px 10px 0px); }
.gridlines .hex-btm-0 { -moz-image-region: rect(10px 24px 20px 0px); }
.hex-top-0 { -moz-image-region: rect(0px 48px 10px 24px); }
.hex-btm-0 { -moz-image-region: rect(10px 48px 20px 24px); }
.hex-top-1 { -moz-image-region: rect(0px 72px 10px 48px); }
.hex-btm-1 { -moz-image-region: rect(10px 72px 20px 48px); }
.hex-top-2 { -moz-image-region: rect(0px 96px 10px 72px); }
.hex-btm-2 { -moz-image-region: rect(10px 96px 20px 72px); }
.hex-top-3 { -moz-image-region: rect(0px 120px 10px 96px); }
.hex-btm-3 { -moz-image-region: rect(10px 120px 20px 96px); }
.hex-top-4 { -moz-image-region: rect(0px 144px 10px 120px); }
.hex-btm-4 { -moz-image-region: rect(10px 144px 20px 120px); }
.hex-top-5 { -moz-image-region: rect(0px 168px 10px 144px); }
.hex-btm-5 { -moz-image-region: rect(10px 168px 20px 144px); }
.hex-top-6 { -moz-image-region: rect(0px 192px 10px 168px); }
.hex-btm-6 { -moz-image-region: rect(10px 192px 20px 168px); }
.hex-top-7 { -moz-image-region: rect(0px 216px 10px 192px); }
.hex-btm-7 { -moz-image-region: rect(10px 216px 20px 192px); }
.hex-top-8 { -moz-image-region: rect(0px 240px 10px 216px); }
.hex-btm-8 { -moz-image-region: rect(10px 240px 20px 216px); }
.hex-top-9 { -moz-image-region: rect(0px 264px 10px 240px); }
.hex-btm-9 { -moz-image-region: rect(10px 264px 20px 240px); }
.hex-top-10 { -moz-image-region: rect(0px 288px 10px 264px); }
.hex-btm-10 { -moz-image-region: rect(10px 288px 20px 264px); }
.hex-top-11 { -moz-image-region: rect(0px 312px 10px 288px); }
.hex-btm-11 { -moz-image-region: rect(10px 312px 20px 288px); }
.hex-top-12 { -moz-image-region: rect(0px 336px 10px 312px); }
.hex-btm-12 { -moz-image-region: rect(10px 336px 20px 312px); }
.hex-top-13 { -moz-image-region: rect(0px 360px 10px 336px); }
.hex-btm-13 { -moz-image-region: rect(10px 360px 20px 336px); }
.hex-top-14 { -moz-image-region: rect(0px 384px 10px 360px); }
.hex-btm-14 { -moz-image-region: rect(10px 384px 20px 360px); }
.hex-top-15 { -moz-image-region: rect(0px 408px 10px 384px); }
.hex-btm-15 { -moz-image-region: rect(10px 408px 20px 384px); }



/* Triangular tiles */

.tri-grid {
  list-style-image: url(triangles.png);
  padding-top: 12px;
}

.tri { margin-top: -10px; }

.gridlines .tri-left-0 { -moz-image-region: rect(120px 19px 140px 0px); }
.gridlines .tri-right-0 { -moz-image-region: rect(120px 38px 140px 19px); }
.tri-left-0 { -moz-image-region: rect(140px 19px 160px 0px); }
.tri-right-0 { -moz-image-region: rect(140px 38px 160px 19px); }
.tri-left-1 { -moz-image-region: rect(0px 19px 20px 0px); }
.tri-right-1 { -moz-image-region: rect(0px 38px 20px 19px); }
.tri-left-2 { -moz-image-region: rect(20px 19px 40px 0px); }
.tri-right-2 { -moz-image-region: rect(20px 38px 40px 19px); }
.tri-left-3 { -moz-image-region: rect(40px 19px 60px 0px); }
.tri-right-3 { -moz-image-region: rect(40px 38px 60px 19px); }
.tri-left-4 { -moz-image-region: rect(60px 19px 80px 0px); }
.tri-right-4 { -moz-image-region: rect(60px 38px 80px 19px); }
.tri-left-5 { -moz-image-region: rect(80px 19px 100px 0px); }
.tri-right-5 { -moz-image-region: rect(80px 38px 100px 19px); }
.tri-left-6 { -moz-image-region: rect(100px 19px 120px 0px); }
.tri-right-6 { -moz-image-region: rect(100px 38px 120px 19px); }
